<!--
 * @Author: shy_didi
 * @Date: 2020-06-09 09:33:27
 * @LastEditTime: 2020-06-10 15:27:42
 * @LastEditors: Please set LastEditors
 * @Description: 目录类别
 * @FilePath: \发明人\fmr\src\pages\home\components\category.vue
--> 
<template>
  <div class="menu">
    <van-grid :column-num="5" :gutter="5">
      <van-grid-item class="vgi" v-for="(item,idx) in imgData" :key="idx">
        <div>
          <van-image :src="item.icon" />
          <p slot="text" class="vgi_key">{{item.key}}</p>
          <p slot="text" class="vgi_name">{{item.name}}</p>
        </div>
      </van-grid-item>

      <van-grid-item class="vgi" v-for="item in datas.slice(2)" :key="item.id">
        <div>
          <van-image :src="item.icon" />
          <p slot="text" class="vgi_key">{{item.key}}</p>
          <p slot="text" class="vgi_name">{{item.name}}</p>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import * as api from "@/request/api/apiList/compete.js";
import signup from "@/assets/Sign up.png";
import download from "@/assets/download.png";
export default {
  data() {
    return {
      datas: [], //menu数据
      imgData: [
        {
          icon: signup,
          key: "Sign up",
          name: "参加报名"
        },
        {
          icon: download,
          key: "Download",
          name: "资料下载"
        }
      ]
    };
  },
  methods: {
    async API_introduce(id, name, key, icon) {
      let result = {
        id,
        name,
        key,
        icon
      };
      return await api.introduce(result);
    }
  },
  async created() {
    let res = await this.API_introduce();
    //console.log(res);
    if (res.data.code === 200) {
      this.datas = res.data.data;
    }
  }
};
</script>

<style lang="scss">
@import "@/style/home.scss"
</style>